  <template>
    <cell-wrapper
      v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
      :key="wrapperType"
      :wrapper-type="wrapperType"
      :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
      <text-display-cell
        v-if="!editState"
        :text="optionsMap[value] || value"
        :columnConfig="columnsConfig"
        v-bind="contentStyle"
      />
      <a-select
        v-else
        :value="value"
        :options="dataSource || []"
        class="full-width"
        @change="handleValueChange"
      />
    </cell-wrapper>
  </template>

  <script>
    import { computed, defineComponent } from 'vue';
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
    import { judgeCellEditable } from '@/utils/index';

    export default defineComponent({
      name: 'OptionsTableCell',
      components: {
        TextDisplayCell,
        CellWrapper,
      },
      inheritAttrs: false,
      props: {
        // 当前单元格的值
        value: {
          type: [Number, String, null],
          default: () => {
            return null;
          },
        },
        // 单元格的默认样式
        defaultStyle: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格的条件样式配置
        conditionStyle: {
          type: Array,
          default: () => {
            return [];
          },
        },
        // 当前行的数据
        rowData: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
        conditionValueMap: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 当前列的配置
        columnsConfig: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 当前单元格依赖的外部数据源
        dataSource: {
          type: Array,
          default: () => [],
        },
        // 当前单元格是否处于编辑状态
        isEdit: {
          type: Boolean,
          default: () => {
            return false;
          },
        },
      },
      emits: ['change'],
      setup(props, { emit }) {
        const editState = computed(() => {
          return (
            props.isEdit &&
            judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
          );
        });
        const optionsMap = computed(() => {
          const result = {};
          (props.dataSource || []).forEach((optionItem) => {
            const { value, label } = optionItem;
            result[value] = label;
          });

          return result;
        });

        // 内容显示的样式
        const contentStyle = computed(() => {
          let { iconType, icon, color, backgroundColor } =
            props.columnsConfig.contentConfig.defaultStyle || {};

          // 此处可添加条件格式的处理逻辑

          return { iconType, icon, color, backgroundColor };
        });
  
        function handleValueChange(value) {
          emit('change', value);
        }

        return {
          editState,
          optionsMap,
          contentStyle,
          handleValueChange,
        };
      },
    });
  </script>

  <style scoped>
    .full-width {
      width: 100%;
    }
  </style>
